<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 21:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>分配菜单</title>

    <!--Begin  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">
    <style>


        .main-content {
            background-color: white;
        }

        tr td a {
            margin-right: 10px;
        }

        .container .table thead tr th {
            line-height:40px;
            text-align: center;
        }

        .container .table tbody tr td {
            line-height:88px;
            vertical-align: auto;
        }

        .btn {
            border-radius: 5px;
        }
        #input1:focus{
            outline-color: #0e90d2;
        }

        .menu1,.menu2 div{
            height: 24px;
            color: #606266;
            cursor: pointer;
            position: relative;
        }
        .menu2 div{
            padding-left: 40px;
        }
        .menu1:hover,.menu2 div:hover{
            background-color: #f8f9fa;
        }
        .menu1:focus,.menu2 div:focus{
            background-color: #f3f8fc;
        }
        .menu1 input:focus,.menu2 div input:focus{
            border-color: #2155b4;
        }
        .menu1 i{
            color: #c0c4cc;
            padding: 5px;
            font-size: 14px;
            width: 15px;
            height: 10px;
        }
        .menu1 input,.menu2 input{
            outline: 1px solid rgba(233, 255, 255, 0.51);
            background-color: #0e90d2;
        }
        .menu2 div,.menu1{
            font-size: 14px;
        }
        .myhandle{
            margin-top: 40px;
            text-align: -webkit-center;
            display: block;
        }
        input[type=checkbox]::after{
            position: absolute;
            top: 4px;
            /*color: #5555;*/
            width: 15px;
            background-color: rgb(255,255,255);
            height: 15px;
            box-shadow: 0px 0px 1px 1px rgb(165, 167, 169);
            display: inline-block;
            visibility: visible;
            text-align: center;
            content: ' ';
        }
        input[type=checkbox]:checked::after{
            content: "✓";
            font-size: 12px;
            font-weight: bold;
            background-color: rgb(3, 169, 243);
            color: white;
        }
        .m1[type=checkbox]:checked::after{
            content: "-";
            font-size: 12px;
            font-weight: bold;
            box-shadow: 0px 0px 1px 1px rgb(3, 169, 243);
        }
    </style>
</head>
<body class="sticky-header">
<jsp:include page="../inc/left.jsp"/>
<div class="main-content">
    <jsp:include page="../inc/header.jsp"/>
    <!--body wrapper start-->
    <div class="wrapper">
        <!--Start Page Title-->
        <div class="page-title-box">
            <h4 class="page-title" style="text-indent: 1em">分配角色</h4>
            <ol class="breadcrumb " style="float:right;">
                <li>
                    <a href="${pageContext.request.contextPath}/index">首页</a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/permissions/admin">权限</a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/permissions/role">角色列表</a>
                </li>
                <li class="active">
                    分配菜单(杨网)
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <div class="container"
             style="border: 1px solid #ebeef5;border-radius: 4px;
                    background-color: #fff;width: 800px;
                    color: #303133;
                    transition: .3s;padding: 35px 35px 15px;
                    margin: 20px auto;">
                <c:forEach items="${menuList}" var="m1">
                    <c:if test="${m1.level==0}">
                        <div class="menu1" tabindex="-1" >
                            <i class="fa fa-caret-down" ></i>
                            <input class="" type="checkbox" value="${m1.id}" tabindex="-1">

                                ${m1.title}
                        </div>
                        <div class="menu2" >
                            <c:forEach items="${menuList}" var="m2">
                                <c:if test="${m2.parentId==m1.id}">
                                    <div tabindex="-1">
                                        <input type="checkbox" ${roleMenuList.indexOf(Integer(m2.id))!=-1?"checked":""} value="${m2.id}" tabindex="-1">
                                            ${m2.title}
                                    </div>
                                </c:if>
                            </c:forEach>
                        </div>
                    </c:if>
                </c:forEach>
                <div class="myhandle">
                    <button class="btn btn-primary" type="button" id="sub">保存</button>
                    <button class="btn btn-default" type="button" id="clear">清空</button>
                    <a class="btn btn-default" href="${pageContext.request.contextPath}/permissions/role">返回</a>
                </div>
        </div>
    </div>
</div>

<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->

<!--Begin Page Level Plugin-->
<script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/raphael-min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/jquery-sparkline/jquery.charts-sparkline.js"></script>
<script src="${pageContext.request.contextPath}/assets/pages/dashboard.js"></script>
<script src="${pageContext.request.contextPath}/assets/layui/layui.js"></script>
<!--End Page Level Plugin-->

<script>

    function init(){
        let obj = $(".menu2 div input")
        for (let i = 0; i < obj.length; i++) {
            let ds = obj[i].parentNode.parentNode.children;
            if(obj[i].checked===true){
                for (let i = 0; i < ds.length; i++) {
                    if(ds[i].children[0].checked===false){
                        $(ds[0].parentNode.previousElementSibling.children[1]).addClass("m1");
                        ds[0].parentNode.previousElementSibling.children[1].checked=true;
                        return;
                    }
                }
                ds[0].parentNode.previousElementSibling.children[1].checked=true;
            }
        }
    }

    $(".menu1 input").bind("click",function (obj) {
        let it = $(obj.currentTarget)[0].checked;
        let cn = $(obj.currentTarget)[0].className;
        console.log(cn);
        let ds = $(obj.currentTarget)[0].parentNode.nextElementSibling.children;
        if(cn==="m1" || it===true){
            for(let i=0;i<ds.length;i++){
                ds[i].children[0].checked=true;
            }
            $(obj.currentTarget).removeClass()
            obj.currentTarget.checked=true;
        }else{
            for(let i=0;i<ds.length;i++){
                ds[i].children[0].checked=false;
            }
            obj.currentTarget.checked=false;
        }
    })
    $(".menu2 div input").bind("click",function (obj) {
        let ds = obj.currentTarget.parentNode.parentNode.children;
        $(ds[0].parentNode.previousElementSibling.children[1]).addClass("m1");
        ds[0].parentNode.previousElementSibling.children[1].checked=true;
        if(obj.currentTarget.checked===false){
            for (let i = 0; i < ds.length; i++) {
                if(ds[i].children[0].checked===true){
                    return;
                }
            }
            ds[0].parentNode.previousElementSibling.children[1].checked=false;
        }else{
            for (let i = 0; i < ds.length; i++) {
                if(ds[i].children[0].checked===false){
                    return;
                }
            }
            $(ds[0].parentNode.previousElementSibling.children[1]).removeClass("m1");
            ds[0].parentNode.previousElementSibling.children[1].checked=true;
        }
    })
    $(".menu1 i").bind("click",function (obj) {
        $(obj.currentTarget).toggleClass("fa-caret-down fa-caret-right")
        $(obj.currentTarget.parentNode.nextElementSibling).slideToggle();
    })
    $("#sub").bind("click",function () {
        let ips = $(".menu2 div input")
        let ids = []
        for (let i=0;i<ips.length;i++){
            if(ips[i].checked===true){
                ids.push($(ips[i]).val())
            }
        }
        $.ajax({
            url:"${pageContext.request.contextPath}/permissions/saveAllocMenu",
            type:"post",
            data:{
                "ids":JSON.stringify({ids}),
                "roleId":${roleId},
            },
            success:function (obj){
                layer.msg("分配成功");
                window.onload();
            }
        })
    })
    $("#clear").bind("click",function () {
        let ips = $(".menu2 div input,.menu1 input");
        for (let i = 0; i < ips.length; i++) {
            ips[i].checked=false;
        }
    })
    init();
</script>

</body>
</html>
